import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:hovue/common/routers/pages.gr.dart';
import 'package:hovue/common/values/images.dart';
import 'dart:ui'; // 添加这个导入以使用ImageFilter

@RoutePage()
class CoverPage extends StatelessWidget {
  const CoverPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // backgroundColor: const Color(0xFFFDF6F0),
      body: Stack(
        children: [
          // 背景图层
          Image.asset(
            Images.cover,
            width: double.infinity,
            height: double.infinity,
            fit: BoxFit.cover,
          ),
          // 毛玻璃效果层
          // BackdropFilter(
          //   filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
          //   child: Container(
          //     color: Colors.black.withOpacity(0.2),
          //     width: double.infinity,
          //     height: double.infinity,
          //   ),
          // ),
          SafeArea(
            child: Column(
              children: [
                GestureDetector(
                  onTap: () {
                    context.router.push(const RegisterRoute());
                  },
                  child: Container(
                    width: double.infinity,
                    padding: EdgeInsets.symmetric(
                      horizontal: 20.w,
                      vertical: 10.h,
                    ),
                    child: Text(
                      'Sign up',
                      textAlign: TextAlign.end,
                      style: TextStyle(
                        fontFamily: 'Inter',
                        fontSize: 16.sp,
                        color: Colors.white,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                  ),
                ),
                SizedBox(height: 80.h),
                Image.asset(Images.logo3, width: 120.w, height: 120.w),
                const Spacer(),
                GestureDetector(
                  onTap: () {
                    // 跳转到登录页面
                    context.router.push(const LoginRoute());
                  },
                  child: Container(
                    padding: EdgeInsets.symmetric(
                      horizontal: 20.w,
                      vertical: 10.h,
                    ),
                    margin: EdgeInsets.symmetric(horizontal: 24.w),
                    width: double.infinity,
                    height: 60.h,
                    decoration: BoxDecoration(
                      color: const Color(0xFFA66645),
                      borderRadius: BorderRadius.circular(10.r),
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Container(
                          width: 30.w,
                          height: 30.w,
                          padding: EdgeInsets.all(1.w),
                          decoration: BoxDecoration(
                            border: Border.all(
                              color: Colors.white.withOpacity(0.5),
                              width: 1.w,
                            ),
                            borderRadius: BorderRadius.circular(10.r),
                          ),
                          child: Image.asset(Images.logo3, width: 20.w),
                        ),
                        SizedBox(width: 10.w),
                        Text(
                          'Existing User Login',
                          style: TextStyle(
                            fontFamily: 'PingFang SC',
                            fontSize: 14.sp,
                            color: Colors.white,
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                SizedBox(height: 20.h),
                Container(
                  padding: EdgeInsets.symmetric(
                    horizontal: 20.w,
                    vertical: 10.h,
                  ),
                  margin: EdgeInsets.symmetric(horizontal: 24.w),
                  width: double.infinity,
                  height: 60.h,
                  decoration: BoxDecoration(
                    color: Colors.black,
                    border: Border.all(
                      color: Colors.white.withOpacity(0.5),
                      width: 1.w,
                    ),
                    borderRadius: BorderRadius.circular(10.r),
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Icon(Icons.apple, color: Colors.white, size: 30.w),
                      SizedBox(width: 10.w),
                      Text(
                        'Continue with Apple',
                        style: TextStyle(
                          fontFamily: 'PingFang SC',
                          fontSize: 14.sp,
                          color: Colors.white,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                    ],
                  ),
                ),
                SizedBox(height: 15.h),
                Center(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        'By Continuing you agree with ',
                        style: TextStyle(
                          fontFamily: 'Inter',
                          color: const Color.fromRGBO(255, 255, 255, 0.6),
                          fontSize: 10.sp,
                        ),
                      ),
                      GestureDetector(
                        onTap: () {
                          // 跳转到服务条款页面
                        },
                        child: Text(
                          'Terms of Service',
                          style: TextStyle(
                            fontFamily: 'Inter',
                            fontSize: 10.sp,
                            color: Colors.white,
                            decoration: TextDecoration.underline,
                            decorationColor: Colors.white,
                            decorationStyle: TextDecorationStyle.solid,
                          ),
                        ),
                      ),
                      Text(
                        ' & ',
                        style: TextStyle(
                          fontFamily: 'Inter',
                          color: const Color.fromRGBO(255, 255, 255, 0.6),
                          fontSize: 10.sp,
                        ),
                      ),
                      GestureDetector(
                        onTap: () {
                          // 跳转到隐私政策页面
                        },
                        child: Text(
                          'Privacy Policy',
                          style: TextStyle(
                            fontFamily: 'Inter',
                            fontSize: 10.sp,
                            color: Colors.white,
                            decoration: TextDecoration.underline,
                            decorationColor: Colors.white,
                            decorationStyle: TextDecorationStyle.solid,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                SizedBox(height: 20.h),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
